<template>
  <div v-if="showdata" class="waybillEdit">
    <!-- class="tab-container waybill-tab-container tab-fixed" -->
    <div style="position: fixed;z-index: 11; top: 20px; left: 100px;">
      <span style="font-size:16px;">{{ waybillData.waybillNo }}</span>
    </div>
    <div
      style="position: fixed;z-index: 11; top: 10px; left: 270px;"
      v-if="showWaybillDetails"
    >
      <HeaderInfo
        :pageType="pageType"
        :Constatvariable="waybillData"
        :initOptionsData="initOptionsData"
      ></HeaderInfo>
    </div>
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="运单编辑" name="edit" class="tabPane">
          <keep-alive>
            <div class="padding">
              <!-- <el-button @click="toPage">toPage</el-button> -->
              <ProgressBar
                class="progressBar"
                ref="bar"
                @saveStateLine="saveStateLine"
                :waybillInfo="waybillData"
              ></ProgressBar>
              <BasicInfo
                :pageType="pageType"
                :waybillData="waybillData"
                :verifyShow="verifyShow"
              ></BasicInfo>
              <el-button type="success" @click="showSenderInfo"
                >点击展开发件人、进口商、派送信息</el-button
              >
              <el-button
                type="success"
                v-if="liquidationInvoices && liquidationInvoices.length > 0"
                @click="showInvoiceInfo"
                >点击展开发票信息</el-button
              >
              <el-button
                type="success"
                v-if="packingLists && packingLists.length > 0"
                @click="showPackageInfo"
                >点击展开箱单信息</el-button
              >
              <SendInfo
                v-if="senderShow"
                :pageType="pageType"
                :waybillData="waybillData"
                :initOptionsData="initOptionsData"
                :verifyShow="verifyShow"
              ></SendInfo>

              <InvoiceInfo
                v-if="invoiceInfoShow"
                :pageType="pageType"
                :tableData="liquidationInvoices"
              ></InvoiceInfo>
              <PackingListInfo
                v-if="pckingListInfoShow"
                :pageType="pageType"
                :tableData="packingLists"
              ></PackingListInfo>
              <WaybillInfo
                v-if="waybillSubs && waybillSubs.length > 0"
                :pageType="pageType"
                :tableData="waybillSubs"
                :initOptionsData="initOptionsData"
                :verifyShow="verifyShow"
              ></WaybillInfo>
              <TrackInfo
                v-if="subWaybills && subWaybills.length > 0"
                :pageType="pageType"
                :tableData="subWaybills"
              ></TrackInfo>
              <GoodsInfo
                :goodsData="goodsData"
                :waybillData="waybillData"
                v-if="waybillData['hdType'] == 0"
              ></GoodsInfo>
              <MasterOrder
                v-if="!verifyShow.saler || verifyShow.superAdmin"
                :waybillData="waybillData"
                :isEdit="false"
              ></MasterOrder>
              <!-- <HouseOrder
                v-if="!verifyShow.saler || verifyShow.superAdmin"
                :waybillData="waybillData"
              ></HouseOrder> -->
            </div>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="文件列表" name="fileList" lazy>
          <FileList
            :Constatvariable="waybillData"
            :verifyShow="verifyShow"
          ></FileList>
        </el-tab-pane>
        <el-tab-pane label="应收应付" name="receivable" lazy>
          <Receivable
            :verifyShow="verifyShow"
            :Constatvariable="waybillData"
            :initOptionsData="initOptionsData"
          ></Receivable>
        </el-tab-pane>
        <el-tab-pane label="阿米巴" name="amoeba" lazy>
          <Amoeba
            :Constatvariable="waybillData"
            :verifyShow="verifyShow"
            :initOptionsData="initOptionsData"
          ></Amoeba>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { ajax } from "@/store/yg/common/utils";
const ProgressBar = () => import("@/components/app/components/ProgressBar");
import FileList from "./../alledit/components/FileList";
import BasicInfo from "./components/BasicInfo";
import GoodsInfo from "../waybillmerge/components/GoodsInfo";
import WaybillInfo from "./components/WaybillInfo";
import TrackInfo from "./components/TrackInfo";
import InvoiceInfo from "./components/InvoiceInfo";
import PackingListInfo from "./components/PackingListInfo";
import MasterOrder from "../waybillmerge/components/MasterOrder";
import HouseOrder from "../waybillmerge/components/HouseOrder";
import Receivable from "../alledit/components/Receivable";
import Amoeba from "../alledit/components/Amoeba";
import HeaderInfo from "../waybillmerge/components/HeaderInfo";
import SendInfo from "../waybillmerge/components/SendInfo";

export default {
  components: {
    ProgressBar,
    FileList,
    BasicInfo,
    GoodsInfo,
    MasterOrder,
    HouseOrder,
    WaybillInfo,
    TrackInfo,
    InvoiceInfo,
    PackingListInfo,
    Receivable,
    Amoeba,
    HeaderInfo,
    SendInfo
  },
  props: [],
  data() {
    return {
      pckingListInfoShow: false,
      invoiceInfoShow: false,
      senderShow: false,
      verifyShow: {
        //运单详情
        waybillView: true,
        //提单详情
        pickUpView: true,
        //发票
        invoiceView: true,
        //阿米巴
        amoebaView: true,
        //文件列表
        fileView: true,
        //应付应收
        payAndReceView: true,
        //应付
        payView: true,
        //应收
        receView: true,
        // 是否是跟单操作
        documentaryOperte: false,
        // ​是否是财务
        finace: false,
        // ​​是否是总部财务
        hqFinace: false,
        // ​​是否是HRA
        hra: false,
        // ​​其他
        other: false,
        // ​​是否是海外操作
        overseasOperte: false,
        // ​​是否是销售助理
        saleAssistant: false,
        // ​​是否是销售
        saler: false,
        // ​​是否是客服
        seller: false,
        // ​​是否是物流操作
        shippingOperte: false,
        // ​​是否是超级管理员
        superAdmin: false,
        // ​用户类型 一个用户有多种类型
        userTypes: [],
        // 删除文件
        deleteFile: false,
        // 上传文件
        uploadFile: false,
        // 下载文件
        downloadFile: false,
        // 推送文件
        pushFile: false,
        // 入库单数据
        instock: false,
        // 编辑阿米巴费用
        editAmoeba: false,
        // 删除阿米巴费用
        deleteAmoeba: false
      },
      waybillData: {},
      waybillId: "",
      showdata: false,
      shippingway: "",
      activeName: "edit",
      countryMap: {},
      serviceItemMap: {},
      showWaybillDetails: false,
      //下拉 值
      initOptionsData: {},
      pageType: "seaFreightHD",
      tableInfo: [
        {
          operationId: "sam",
          salesmanId: "sam",
          waybillSingleId: "122121212",
          waybillNo: "121212121",
          isTaxFarming: "1",
          isCustomerDeclaration: "1",
          isVatAndEori: "1",
          eoriIsCertified: "1",
          dispatchAddressCode: "21341234",
          declareNameCn: "士大夫",
          inStockTotalPackages: 1212,
          inStockActualWeight: 123,
          inStockVolume: 123.3,
          waybillLabel: "tag",
          zipCode: "121222"
        }
      ],
      goodsData: [
        { boxType: "柜型" },
        { contairNumber: "柜号" },
        { sealNumber: "封条号" },
        { boxCount: "件数" },
        { packageType: "包装类型" },
        { grossWeight: "毛重" },
        { grossVolume: "体积" }
      ],
      //合单
      waybillSubs: [],
      liquidationInvoices: [],
      packingLists: [],
      //子单
      subWaybills: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.waybillId = this.$route.query.waybillId;
    this.shippingway = this.$route.query.shippingway;
    var activeNameTab = this.$route.query.activeName;
    this.showTabByActive(activeNameTab);
    console.info(this.waybillId, this.shippingway);
    this.initWayBillData();
    this.initOptions();
  },
  methods: {
    showSenderInfo() {
      if (this.senderShow == false) {
        this.senderShow = true;
      } else {
        this.senderShow = false;
      }
    },

    showInvoiceInfo() {
      if (this.invoiceInfoShow == false) {
        this.invoiceInfoShow = true;
      } else {
        this.invoiceInfoShow = false;
      }
    },

    showPackageInfo() {
      if (this.pckingListInfoShow == false) {
        this.pckingListInfoShow = true;
      } else {
        this.pckingListInfoShow = false;
      }
    },

    async initOptions() {
      var param = {};
      param["id"] = this.waybillId;
      const waybillNo = this.$route.query.waybillNo;
      param["waybillNo"] = waybillNo;
      const initData = await ajax("getAllOptions", param);

      if (initData) {
        this.initOptionsData = initData.data;
        console.log("initOptionsData", this.initOptionsData);
        this.showWaybillDetails = true;
      } else {
        console.log("查询下拉接口出错 请检查接口");
      }
    },

    showTabByActive(activeNameTab) {
      if (null != activeNameTab && activeNameTab != "") {
        this.activeName = activeNameTab;
      }
    },

    toPage() {},
    initWayBillData() {
      var param = {};
      param["type"] = 2;
      ajax("verifyPermissions", param).then(
        res => {
          this.verifyShow = res;
          console.log("海运末端全编辑校验权限", this.verifyShow);
        },
        error => {
          console.log(error);
        }
      );
      const waybillId = this.waybillId;
      const waybillNo = this.$route.query.waybillNo;
      param["waybillNo"] = waybillNo;
      param["id"] = waybillId;
      param["shippingWayType"] = this.$route.query.shippingway;
      ajax("editWaybillHdMerge", param).then(
        res => {
          if (res.code != 200) {
            this.$message.error(res.message);
          } else {
            this.waybillData = res.data;
            var models = res.data2;
            this.subWaybills = models["subWaybills"];
            this.packingLists = models["packingLists"];
            this.liquidationInvoices = models["liquidationInvoices"];
            this.waybillSubs = models["waybillSubs"];
            console.log("waybillSubs", this.waybillSubs);

            if (this.waybillData.hdType == 1) {
              this.pageType = "airFreightHD";
            }
            if (!waybillId) {
              this.$router.push({
                query: {
                  waybillNo: waybillNo,
                  waybillId: res.data["id"]
                }
              });
            }
            console.info("空运数据：", res.data);
          }
          this.showdata = true;
        },
        error => {
          console.log(error);
        }
      );
    },
    async init() {
      const { countryMap } = await initData();
      const { data } = await initAbroadWaybillRender();

      this.countryMap = countryMap;
      this.serviceItemMap = data.serviceItemMap;
    },
    async saveStateLine(params) {
      //保存轨迹节点
      params.waybillId = this.waybillData.id;
      params.time = params.operationDateTime;
      params.clickStatus = params.status;
      console.log("params2", params);
      const data = await ajax("updateWaybillStateAndTime", params);
      if (data.code === 200) {
        this.initWayBillData();
      } else {
        this.$message.error(data.failTips);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.title-icon {
  display: inline-block;
  width: 120px;
}
</style>
<style scoped>
/deep/ .el-tabs__item.is-disabled {
  color: #51abd1;
}

/deep/ .el-form-item__content {
  font-size: 12px;
}

/deep/ .el-autocomplete {
  width: 100%;
}
</style>
